<template>
  <div class="login_container">
    <div class="loginbox">
      <!-- 头像盒子 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" alt="" />
      </div>

      <!-- 登录模块 -->
      <div class="tloginbox">
        <!-- :rules 用来动态绑定表单验证规则 -->
        <el-form ref="loginFormRef" class="login" :model="loginForm" :rules="Formrules">
          <!-- prop绑定校验的属性 -->
          <el-form-item class="inp" prop="username">
            <!-- 用户名 -->
            <el-input prefix-icon="iconfont icon-yonghuming" v-model="loginForm.username"></el-input>
          </el-form-item>

          <el-form-item class="inp" prop="password">
            <!-- 密码 -->
            <el-input prefix-icon="iconfont icon-mima" v-model="loginForm.password"></el-input>
          </el-form-item>
          <el-form-item label="" class="btns">
            <el-button type="primary" @click="login">登录</el-button>

            <el-button type="info" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getLoginToken } from '@/api/index.js'
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
      },
      // 表单验证规则
      Formrules: {
        username: [
          // 必须输入，表单失去焦点时校验，如果没有输入，提示‘请输入用户名’
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // 输入长度必须是3到10位，失去焦点时校验，如果不符合条件，提示‘长度在3到10个字符’
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    //重置表单
    reset() {
      // 使用refs获取实例对象，调用方法完成重置表单
      this.$refs.loginFormRef.resetFields()
    },
    //单击登录按钮调用此方法
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        // 当rules通过时，返回true
        // rules没有通过时，返回false
        if(valid){
        let {data:result} = await getLoginToken(this.loginForm)
        if(result.meta.status == 200){
          // 登录成功弹框提示
          this.$message.success('登录成功')
          
          // 会话存储保存token
          sessionStorage.setItem('token',result.data.token)
         //跳转路由
         this.$router.push('/home')

        } else {
          // 登录失败弹框提示
          this.$message.error('登录失败')
        }
        }else {
          return 
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.login_container {
  background: #2b4b6b;
  // 高度宽度 100%
  height: 100%;
  width: 100%;
  // 设置子盒子水平垂直居中
  display: flex;
  justify-content: center;
  align-items: center;
  .loginbox {
    width: 450px;
    height: 300px;
    background: #fff;
    position: absolute;
    .avatar_box {
      border: 1px solid #eee;
      width: 130px;
      height: 130px;
      border-radius: 50%;
      overflow: hidden;
      padding: 10px;
      box-sizing: border-box;
      box-shadow: 0 0 10px #ddd;
      background-color: #fff;
      //使盒子x居中，y上移动50%
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      img {
        width: 100%;
        border-radius: 50%;
        background-color: #eee;
      }
    }
    .tloginbox {
      width: 100%;
      height: 100%;
      .login {
        width: 100%;
        height: 100%;
        // 沿侧轴排列，垂直水平居中
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 20px;
        padding-top: 30px;
        box-sizing: border-box;
        .inp {
          width: 100%;
        }
        .btns {
          // 两个按钮靠右排列
          width: 100%;
          display: flex;
          justify-content: flex-end;
          padding-right: 80px;
        }
      }
    }
  }
}
</style>
